<!--
 * @Descripttion: 啦啦啦哈哈哈
 * @version: 
 * @Author: lsy
 * @Date: 2021-09-06 09:14:54
 * @LastEditors: liushengyan
 * @LastEditTime: 2022-08-05 13:49:26
-->
<template>
  <div style="margin-left:300px;margin-top:100px">
    <video-player
      class="videoCall_video_player_demo video-player vjs-custom-skin"
      ref="videoCallref"
      :playsinline="true"
      :options="playerOptions"
      @timeupdate="onPlayerTimeupdate($event)"
    />

    <!-- <video id="video" controls="controls" style="height:500px" /> <br />-->

    <timeLine
      :width="1000"
      :currentTime="currentTime"
      :videoRecords="videoRecords"
      @changCurrentTime="changCurrentTime"
    />
  </div>
</template>
<script setup>
import timeLine from "./components/timeLineHalfSe"
import { ref, reactive } from "@vue/reactivity";
import { defineComponent, onMounted } from "@vue/runtime-core";
import videoList from "./js/videoconfig.js"

defineComponent({ timeLine })

const startPoint = ref(1636971324)

const currentTime = ref(0);

const changCurrentTime = time => {
  currentTime.value = time
  setCurrentTime(time - startPoint.value)
}

const videoRecords = ref(videoList);

const playerOptions = reactive({
  //播放速度
  playbackRates: [0.5, 1.0, 1.5, 2.0, 3, 8],
  //如果true,浏览器准备好时开始回放。
  autoplay: false,
  // 默认情况下将会消除任何音频。
  muted: true,
  // 导致视频一结束就重新开始。
  loop: false,
  // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  preload: "auto",
  language: "zh-CN",
  // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  aspectRatio: "16:9",
  // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  fluid: true,
  sources: [
    {
      //类型
      type: "application/x-mpegURL",
      //url地址
      // src: "http://192.168.1.227:7086/vod/center/cameraid/1000008%240/substream/1/recordtype/1/totallength/24418/begintime/1636970700/endtime/1637020800.m3u8"
      src: "https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8"
    }
  ],
  //你的封面地址
  poster: "",
  //允许覆盖Video.js无法播放媒体源时显示的默认信息。
  notSupportedMessage: "此视频暂无法播放，请稍后再试",
  // controls: false,//控制台显示
  // controlBar: {
  //   timeDivider: false,
  //   durationDisplay: false,
  //   remainingTimeDisplay: false,
  //   //全屏按钮
  //   fullscreenToggle: true,
  // }
});

const videoCallref = ref(null);

/* 获取视频播放进度 */
const onPlayerTimeupdate = player => {
  currentTime.value = player.cache_.currentTime + startPoint.value;
};
const setCurrentTime = data => {
  videoCallref.value.player.currentTime(data);
};

// let list = [
//    'https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8',
// ]
// const playHLS = (m3u8Data) => {
//   if (Hls.isSupported()) {
//     var video = document.getElementById('video');
//     var hls = new Hls();
//     hls.loadSource(m3u8Data);
//     hls.attachMedia(video);
//     hls.on(Hls.Events.MANIFEST_PARSED, function () {
//       video.play();
//       // video.playbackRate = 4;//改变速度最高16倍
//     });
//   } else {
//     alert(12312)
//   }
// }

onMounted(() => {
  // playHLS(list[0]);
  currentTime.value = startPoint.value
})

</script>
<style>
.videoCall_video_player_demo {
  width: 1000px;
}
</style>
